<template>
	<view>
		<!--pages/hometown/hometown.uniml-->
		<nav-back></nav-back>

		<view class="title">
			<text>请选择您的家乡 </text>
		</view>
		<view class="tip">最真实的自己，更快遇到最应该的那个人</view>

		<picker-view @change="changePosition" :value="positionValue" class="my-picker-view">
			<picker-view-column>
				<view class="item" v-for="(item,index) in provinceList" :key="index">{{item}}</view>
			</picker-view-column>
			<picker-view-column>
				<view class="item" v-for="(item,index) in cityList" :key="index">{{item}}</view>
			</picker-view-column>
			<picker-view-column>
				<view class="item" v-for="(item,index) in areaList" :key="index">{{item}}</view>
			</picker-view-column>
		</picker-view>

		<button class="next" type="primary" @click="handleNext">下一步</button>

	</view>
</template>

<script>
	import request from '@/utils/request.js'
	import NavBack from '@/components/NavBack.vue'

	export default {
		components: {
			NavBack
		},
		data() {
			return {
				provinceList: [],
				cityList: [],
				areaList: [],
				currentProvince: [],
				provinceName: '',
				cityName: '',
				areaName: '',
				positionValue: [21, 10, 0],
			}
		},
		onLoad() {
			this.inniList()
		},
		methods: {
			inniList() {
				setTimeout(()=>{
					this.districts = getApp().globalData.districts
					console.log(this.districts, 'this.districts');
					this.provinceList = this.districts.map((element) => {
							return element.name
						}),
						this.cityList = this.districts[21].districts.map((element) => {
							return element.name
						}),
						this.areaList = this.districts[21].districts[10].districts.map((element) => {
							return element.name
						}),
						this.provinceName = this.provinceList[21]
					this.cityName = this.cityList[10]
					this.areaName = this.areaList[0]
				},100)
			},
			
			changePosition(e) {
				const val = e.detail.value
				console.log(val, this.districts[val[0]], 'changePosition');
				let provinceIndex = val[0]
				let cityIndex = val[1]
				let areaIndex = val[2]
				this.currentProvince = this.districts[val[0]]
				console.log(this.currentProvince, 'this.positionValue');
				if (this.positionValue[0] != val[0]) {
					this.positionValue[0] = val[0]
					// this.positionValue[1] = 0
					this.cityList = this.currentProvince.districts.map((element) => {
						return element.name
					})
					this.areaList = this.currentProvince.districts[0].districts.map((element) => {
							return element.name
						}),
						this.provinceName = this.currentProvince.name
					this.cityName = this.cityList[cityIndex]
					this.areaName = this.areaList[areaIndex]
				} else if (this.positionValue[1] != val[1]) {
					this.positionValue[1] = val[1]
					// this.positionValue[2] = 0
					this.areaList = this.currentProvince.districts[cityIndex].districts.map((element) => {
							return element.name
						}),
						this.cityName = this.cityList[cityIndex]
					this.areaName = this.areaList[areaIndex]
				} else if (this.positionValue[2] != val[2]) {
					this.positionValue[2] = val[2]
					this.areaName = this.areaList[areaIndex]
				}
				console.log(this.currentProvince, 'this.currentProvince');
			},
			handleNext() {
				let homeTown = `${this.provinceName} ${this.cityName} ${this.areaName}`
				getApp().globalData.userInfo.homeTown = homeTown
				console.log(homeTown, 'homeTown');
				uni.redirectTo({
					url: '/pages/userInfo/workArea/workArea'
				})
			},
		}
	}
</script>

<style lang="scss">
	@import "@/style/register.scss";
</style>